<template>
  <div style="width: 100%;height: 380px;position: relative;">
    <div class="aside">
        <div>
            <img src="/imgs/homepage/7.jpg" alt="">
            <p>吉仔在线</p>
        </div>
        <div>
            <img src="/imgs/homepage/7.jpg" alt="">
            <p><router-link to="/inquiry" class="personlink">发布询价</router-link></p>
        </div>
        <div>
            <img src="/imgs/homepage/7.jpg" alt="">
            <p><router-link to="" class="personlink">我的收藏</router-link></p>
        </div>
        <div>
            <img src="/imgs/homepage/7.jpg" alt="">
            <p>签到有礼</p>
        </div>
    </div>
    <img src="/imgs/homepage/6.jpg" alt="" style="width: 100%;height: 100%;">
    <div class="four" style="display: flex;">
        <div class="four-child" style="margin-left: 30px;">
            <img src="/imgs/homepage/7.jpg" alt="">
            <div class="four-child-div">
                <p>实时价格查询</p>
                <p>全面，及时，高效的查询服务</p>
            </div>
        </div>
        <div class="four-child">
            <img src="/imgs/homepage/8.jpg" alt="">
            <div class="four-child-div">
                <p>一站式采购</p>
                <p>公平、合理、便捷的采购平台</p>
            </div>
        </div>
        <div class="four-child">
            <img src="/imgs/homepage/9.jpg" alt="">
            <div class="four-child-div">
                <p>供求智能匹配</p>
                <p>专厘客服，以用户为中心</p>
            </div>
        </div>
        <div class="four-child">
            <img src="/imgs/homepage/10.jpg" alt="">
            <div class="four-child-div">
                <p>行业资讯整合</p>
                <p>实时资讯、独家调研行业信息</p>
            </div>
        </div>
    </div>
  </div>
  <div class="home-main">
  </div>
    <div style="width: 100%;height: 450px;background-color: white;">
        <div style="width:80%;height:100%;margin: auto">
            <!-- <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" :style="{ 'color':'red' ,'font-size': '18px' }" @click="onClick"/>
            <router-view></router-view> -->
            <div style="display: flex;justify-content: center;">
            <div @click="switchCom(item, index)" :class="[active == index ? 'active' : '']" class="tabs"
            v-for="(item, index) in data">
            <div>{{ item.name }}</div>
            </div>
        </div>
        <component :is="comId"></component>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import AVue from '../views/DataBase/report.vue'
import BVue from '../views/DataBase/run.vue'
// import { useRouter } from 'vue-router'
// const router = new useRouter()

//     const current = ref(['mail']);
//     const items = ref([
//     {
//         key: '/',
//         label: '首页',
//         title: '首页',
//     },
//     {
//         key: 'r2',
//         label: '吉市价',
//         title: '信息价、市场价',
//     }
//     ]);
//     const onClick = (item) => {
//     console.log(item.key)
//     router.push(item.key)
//     }

const comId = ref(AVue)
const active = ref(0)

const switchCom = (item, index) => {
  comId.value = item.com
  active.value = index
}

const data = reactive([
  {
    name: '吉材资讯',
    com: AVue
  },
  {
    name: '行业动态',
    com: BVue
  }
])
</script>

<style>
.aside{
    position: absolute;
    top: 280px;
    right: 0;
    width: 80px;
    height: 280px;
    text-align: center;
    background-color: orange;
    color: white;
}
.aside div{
    width: 80%;
    height: 24%;
    margin: auto;
    padding-top: 8px;
    border-bottom: 1px solid white;
}
.aside div:last-child{
    border: 0;
}
.aside img{
    width: 35px;
    height: 35px;
}
.aside p{
    font-size: 12px;
}
.personlink{
    color: white;
}
.personlink:hover{
    background-color: orange;
}
.four{
    position: absolute;
    bottom: -40px;
    right: 10%;
    width: 80%;
    height: 80px;
}
.four-child{
    display: flex;
    width: 21%;
    height: 100%;
    margin-right: 2%;
    background-color: white;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    box-shadow: 3px 3px 6px orange;
}
.four-child img{
    width: 40px;
    height: 40px;
}
.four-child p{
    margin: 0;
    font-weight: bold;
}
.four-child p:first-child{
    font-size: 18px;
}
.four-child p:last-child{
    font-size: 13px;
}
.four-child-div{
    float: right;
    width: 75%;
    height: 70%;
    padding-left: 10px;
}
.home-main {
    width: 100%;
    height: 400px;
}
.home-main-head{
    width: 30%;
    height: 100%;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    margin: auto;
}
.home-main-head span{
    font-size: 20px;
    margin-right: 40px;
}
.head-first{
    color: orange;
    border-bottom: 3px solid orange;
}
.home-main-main{
    width: 100%;height: 40px;line-height: 40px;padding-left: 10px;
}
.home-main-main span{
    border-radius: 30px;
    padding: 5px 20px 5px 20px;
    border: 1px solid grey;
    cursor: pointer;
}
.home-main-main .report{
    margin-right: 40px;
    border: 1px solid orange;
    background-color: orange;
    color: white;
}
.more{
    height: 25px;
    line-height: 25px;
    margin-top: 6.5px;
    border-radius: 30px;
    padding: 0 20px 0 20px;
    float: right;
    border: 1px solid grey;
    cursor: pointer;
}
.active{
    color: orange;
    font-weight: bold;
    border-bottom: 3px solid orange;
}
.tabs {
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 30px;
  cursor: pointer;
}
</style>